<template>
  <div class="content">
    <!-- 上面五个矩形开始 -->
    <div class="content-top">
      <div class="one">
        <div class="title1">设备总数</div>
        <div class="val">9个</div>
      </div>
      <div class="two">
        <div class="title1">在线设备数</div>
        <div class="val">2个</div>
      </div>
      <div class="three">
        <div class="title1">离线设备数</div>
        <div class="val">7个</div>
      </div>
      <div class="four">
        <div class="title1">工程总数</div>
        <div class="val">7个</div>
      </div>
      <div class="five">
        <div class="title1">工单总数</div>
        <div class="val">34个</div>
      </div>
      <!-- 上面五个矩形结束 -->
    </div>
    <div class="content-bottom">
      <!-- 地图容器开始 -->
      <div class="left">
        <Map></Map>
        <!-- 地图容器结束 -->
      </div>
      <div class="right1">
        <div class="right-top">
          <!-- 设备状态饼图容器开始 -->
          <div class="right-top-left">
              <C221></C221>
            <!-- 设备状态饼图容器结束 -->
          </div>
          <!-- 图表容器开始 -->
          <div class="right-top-right">
              <C222></C222>
            <!-- 图表容器结束 -->
          </div>
        </div>
        <!-- 柱状图容器开始 -->
        <div class="right-bottom">
            <C223></C223>
          <!-- 柱状图容器结束 -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import C221 from '@/views/dashboard/components/C221.vue'
import C222 from '@/views/dashboard/components/C222.vue'
import C223 from '@/views/dashboard/components/C223.vue'
import Map from '@/views/dashboard/components/Map.vue'
export default {
  components: {
    C221,
    C222,
    C223,
    Map
  },
}
</script>
<style>
.content {
  width: 1312px;
  height: 624.4px;
  display: flex;
  flex-direction: column;
}

.content-top {
  height: 224.4px;
  display: flex;
  flex-dierction: row;
}

.one {
  width: 252.6px;
  height: 120px;
  margin: 52.2px 4.4px;
  background-color: #fdc660;
  text-align: center;
}

.two {
  width: 252.6px;
  height: 120px;
  margin: 52.2px 4.4px;
  background-color: #fda065;
  text-align: center;
}

.three {
  width: 252.6px;
  height: 120px;
  margin: 52.2px 4.4px;
  background-color: #f86b66;
  text-align: center;
}

.four {
  width: 252.6px;
  height: 120px;
  margin: 52.2px 4.4px;
  background-color: #e6003b;
  text-align: center;
}

.five {
  width: 252.6px;
  height: 120px;
  margin: 52.2px 4.4px;
  background-color: #8774f2;
  text-align: center;
}

.title1 {
  height: 54px;
  width: 224.6px;
  margin: 24.95px 14px 0;
  font-family: 'Microsoft Yahei';
  color: white;
  line-height: 3em;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
}

.val {
  height: 16.1px;
  width: 224.6px;
  margin: 0 14px 24.95px;
  font-family: 'Microsoft Yahei';
  color: white;
  text-align: right;
}

.content-bottom {
  height: 400px;
  width: 1312px;
  display: flex;
  flex-direction: row;
}

.left {
  height: 400px;
  width: 514px;
  margin-right: 8px;
}

.right1 {
  height: 400px;
  width: 742px;
  margin-left: 8px;
  display: flex;
  flex-direction: column;
}

.right-top {
  height: 200px;
  width: 770px;
  display: flex;
  flex-direction: row;
}

.right-bottom {
  height: 200px;
  width: 770px;
}

.right-top-left {
  height: 200px;
  width: 385px;

}

.right-top-right {
  height: 200px;
  width: 385px;
}
</style>
